import React, { useEffect, useState } from 'react';
import { Card, Row, Col, Statistic, Button, Divider, Typography } from 'antd';
import { CodeOutlined, FolderOutlined, ToolOutlined, ReloadOutlined } from '@ant-design/icons';
import { useLanguage } from '../../i18n/I18nProvider';
import { apiService } from '../../services';
import './Home.scss';

const { Title, Paragraph } = Typography;

interface BasicInfo {
  rootPath: string;
  rootName: string;
  timestamp: number;
}

const Home: React.FC = () => {
  const { t } = useLanguage();
  const [basicInfo, setBasicInfo] = useState<BasicInfo | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  // 加载基础信息
  const loadBasicInfo = async () => {
    try {
      setLoading(true);
      const response = await apiService.basic.getBasicInfo();
      if (response && typeof response === 'object' &&
          'rootPath' in response &&
          'rootName' in response &&
          'timestamp' in response) {
        setBasicInfo(response as BasicInfo);
      }
    } catch (error) {
      console.error('加载基础信息失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadBasicInfo();
  }, []);

  return (
    <div className="home-page page-container">
      <div className="page-header">
        <Title level={2}>{t('app.title')}</Title>
        <Paragraph className="page-description">
          {t('dashboard.description')}
        </Paragraph>
      </div>

      {/* 基础信息卡片 */}
      <Row gutter={[16, 16]} className="mb-24">
        <Col xs={24} sm={12} md={8}>
          <Card loading={loading}>
            <Statistic
              title={t('dashboard.rootPath')}
              value={basicInfo?.rootPath || '-'}
              valueStyle={{ fontSize: '16px' }}
              prefix={<FolderOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card loading={loading}>
            <Statistic
              title={t('dashboard.rootName')}
              value={basicInfo?.rootName || '-'}
              valueStyle={{ fontSize: '16px' }}
              prefix={<CodeOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card loading={loading}>
            <Statistic
              title={t('dashboard.scanTime')}
              value={basicInfo?.timestamp ? new Date(basicInfo.timestamp).toLocaleString() : '-'}
              valueStyle={{ fontSize: '16px' }}
              prefix={<ReloadOutlined />}
            />
            <Button
              type="primary"
              onClick={loadBasicInfo}
              style={{ marginTop: '16px' }}
              icon={<ReloadOutlined />}
            >
              {t('dashboard.rescan')}
            </Button>
          </Card>
        </Col>
      </Row>

      {/* DepVista介绍 */}
      <Card className="intro-card">
        <Title level={3}>{t('dashboard.aboutTitle')}</Title>
        <Divider />
        <Row gutter={[24, 24]}>
          <Col xs={24} md={8}>
            <Card className="feature-card">
              <CodeOutlined className="feature-icon" />
              <Title level={4}>{t('dashboard.feature1Title')}</Title>
              <Paragraph>{t('dashboard.feature1Desc')}</Paragraph>
            </Card>
          </Col>
          <Col xs={24} md={8}>
            <Card className="feature-card">
              <FolderOutlined className="feature-icon" />
              <Title level={4}>{t('dashboard.feature2Title')}</Title>
              <Paragraph>{t('dashboard.feature2Desc')}</Paragraph>
            </Card>
          </Col>
          <Col xs={24} md={8}>
            <Card className="feature-card">
              <ToolOutlined className="feature-icon" />
              <Title level={4}>{t('dashboard.feature3Title')}</Title>
              <Paragraph>{t('dashboard.feature3Desc')}</Paragraph>
            </Card>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default Home;
